<template>
	<div>
		<el-button icon="el-icon-back" @click="back()">返回成绩管理</el-button>
		<el-container
			style="height: auto; border: 1px solid #eeel;margin-top: 10px;box-shadow: 0px 0px 5px 2px gainsboro;">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<el-menu :default-openeds="['1']">
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-s-management"></i>评卷总量:{{userNum}}</template>
						<div @click="scrollToElement(item.id)" v-for="(item,index) in userList">
							<el-menu-item :index="`${String(index)}`">
								<i class="el-icon-s-order"></i>
								<span slot="title">{{item.userName}}
									<span v-if="item.isScore == '未评分'" style="color: #F56C6C;">({{item.isScore}})</span>
									<span v-if="item.isScore == '已评分'" style="color: #67C23A;">({{item.isScore}})</span>
								</span>
							</el-menu-item>
						</div>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<div class="contantBox">
						<div class="contantTop">
							<div class="contantTopTitle">
								<el-row>
									<el-col :span="4">
										<div class="titWord">考生信息</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">题型</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">试题总量</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">客观题得分</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">简答题得分</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">总分</div>
									</el-col>
								</el-row>
							</div>
							<div class="contantBottomTitle">
								<el-row>
									<el-col :span="4">
										<div class="titWord" v-if="chooseUser.userName">{{chooseUser.userName}}</div>
										<div class="titWord" v-else>无</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">简答题</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">{{questionList.length}}</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">{{ObjectivePoint}}</div>
									</el-col>
									<el-col :span="4">
										<div class="titWord">{{SubjectivePoint}}</div>
									</el-col>
									<el-col :span="4">
										<div class="titWordRed">{{numPoint}}</div>
									</el-col>
								</el-row>
							</div>
						</div>
						<div>
							<div style="font-size: 20px;font-weight: bold;padding: 30px 0px 10px 0px;">
								简答题(共{{questionList.length}}题，共{{scoreNum}}分)
							</div>
							<div style="margin: 10px 0px;" v-for="(item,index) in questionList">
								<div class="questionBox">
									<div>{{index + 1}}.{{item.name}}</div>
									<div class="pointBox">
										<div style="color: #5d5d5d;font-size: 14px;padding: 0px 10px;">
											满分:{{item.score}}分
										</div>
										<div style="width: 80px;">
											<el-input type="number" :max="item.score" min="0"
												@input="handleInput(item.id,item.userScore,item.score)" size="medium"
												v-model="item.userScore" placeholder="分数">
											</el-input>
										</div>
									</div>
								</div>
								<div class="userAnswerBox">
									<div class="blueBox">答</div>
									<div class="answerBox">
										{{item.userAnswer}}
									</div>
								</div>
								<div class="userAnswerBox">
									<div class="blueBoxBG">正</div>
									<div class="answerBox">
										{{item.answer}}
									</div>
								</div>
								<div class="userAnswerBox">
									<div class="blueBoxBG">解</div>
									<div class="answerBox">
										{{item.analysis}}
									</div>
								</div>
							</div>
						</div>
						<div style="text-align: center;padding: 20px;">
							<el-button size="medium" @click="handleEdit()">查看试卷详情</el-button>
							<el-button type="primary" size="medium" @click="saveScore">保存评分</el-button>
						</div>
					</div>
				</el-main>
			</el-container>
		</el-container>
		<el-dialog :title="'考试名称:' + userPaper.name" :visible.sync="dialogTableVisible">
			<div class="paperContont">
				<div class="userBox">
					<div style="font-size: 18px;">考生: <span
							style="font-size: 20px;font-weight: bold;">{{userPaper.userName}}</span></div>
					<div style="font-size: 18px;">总分: <span
							style="color: #F56C6C;font-size: 30px;">{{userPaper.score}}</span></div>
				</div>
				<div class="topicBox" v-for="(item,index) in userAnswersList">
					<div style="background-color: #faf9fe;width: 100%;display: flex;flex-direction: row;justify-content: space-between;"
						:id="item.id">
						<div class="topicTitle">
							<div>{{index + 1}}、{{item.type}}</div>
							<div class="scoreBox">
								<el-tag size="medium">分值:{{item.score}}分</el-tag>
							</div>
						</div>
					</div>
					<div class="topicConBox">
						<div class="topicWord">{{item.name}}</div>
						<div class="checkBoxList" v-if="item.type == '单项选择题'">
							<div class="blueBox">答</div>
							<el-radio-group v-model="item.userAnswer">
								<div v-for="j in item.options">
									<el-radio :label="j.value" border size="medium"
										:disabled='j.value != item.userAnswer'>{{j.label}}.{{j.value}}</el-radio>
								</div>
							</el-radio-group>
						</div>
						<div class="checkBoxList" v-if="item.type == '多项选择题'">
							<div class="blueBox">答</div>
							<el-checkbox-group v-model="item.userAnswer" style="width: 100%;">
								<div v-for="j in item.options">
									<el-checkbox :label="j.value" border :disabled='!j.ischeck' size="medium">
										{{j.label}}.{{j.value}}
									</el-checkbox>
								</div>
							</el-checkbox-group>
						</div>
						<div class="checkBoxList" v-if="item.type == '判断题'">
							<div class="blueBox">答</div>
							<el-radio-group v-model="item.userAnswer">
								<div v-for="j in tfOptions">
									<el-radio :label="j.name" border size="medium"
										:disabled='j.name != item.userAnswer'>{{j.name}}</el-radio>
								</div>
							</el-radio-group>
						</div>
						<div class="inputBox" v-if="item.type == '填空题' || item.type == '简答题'">
							<div class="blueBox">答</div>
							<el-input type="textarea" :rows="3" placeholder="请输入内容" disabled v-model="item.userAnswer">
							</el-input>
						</div>
					</div>
					<div class="botBox">
						<div v-if="item.type != '简答题'" style="font-size: 16px;">正确答案: <span
								style="font-size: 20px;font-weight:bold;color:#F56C6C;">{{item.answer}}</span></div>
						<div v-if="item.type == '简答题'"></div>
						<div v-if="item.type != '简答题'"
							style="margin-top: -80px;z-index: 999;position: absolute;margin-left:75%;">
							<div v-if="item.score == item.userScore">
								<img src="../../assets/right.png" alt="" style="width: 60px;">
							</div>
							<div v-else-if="item.score != item.userScore">
								<img src="../../assets/error.png" alt="" style="width: 60px;">
							</div>
						</div>
						<div style="font-size: 16px;">得分: <span
								style="font-size: 20px;color:#F56C6C;">{{item.userScore}}</span></div>
					</div>
					<div class="checkBoxList">
						<el-collapse accordion>
							<el-collapse-item title="查看解析">
								<div>{{item.analysis}}</div>
								<!-- <div v-if="item.analysis == null">暂无解析</div> -->
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.userAnswerBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 20px auto;
	}

	.answerBox {
		flex: 1;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		padding: 10px 17px;
		font-size: 13px;
		min-height: 80px;
	}
	
	.userBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: 0 auto;
	}

	.blueBoxBG {
		border: solid 1px #409EFF;
		width: 32px;
		height: 32px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
		color: white;
		margin: 0 20px 0 0;
		background-color: #409EFF;
	}

	.blueBox {
		border: solid 1px #409EFF;
		width: 32px;
		height: 32px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
		color: #409EFF;
		margin: 0 20px 0 0;
	}

	.pointBox {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.titWordRed {
		color: red;
		font-weight: bold;
		padding: 15px 0px;
		border: solid 1px #e6ebf5;
		font-size: 18px;
	}

	.titWord {
		padding: 15px 0px;
		border: solid 1px #e6ebf5;
	}

	.contantTopTitle {
		text-align: center;
		background-color: #eff0f3;
	}

	.contantBottomTitle {
		text-align: center;
	}

	.getPointBox {
		font-size: 18px;
		width: 100%;
		padding: 10px 20px 10px 20px;
		display: flex;
		flex-direction: row;
		margin: 10 auto;
	}

	.lastBox {
		width: 95%;
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	a {
		text-decoration: none;
	}

	.greenColorBox {
		background-color: #b0ff8a;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.redColorBox {
		background-color: #ff8585;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}


	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 0px;
	}

	.colorBox {
		background-color: #faf9fe;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.searchBox {
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.checkBoxList {
		padding: 10px 20px 10px 20px;
		display: flex;
		flex-direction: row;
	}

	.inputBox {
		font-size: 18px;
		width: 100%;
		padding: 10px 20px 10px 20px;
		display: flex;
		flex-direction: row;
		margin: 10 auto;
		justify-content: space-between;
	}

	.paperContont {
		/* min-width: 300px;
		max-height: calc(100vh - 350px);
		overflow-y: scroll; */
	}

	::-webkit-scrollbar {
		width: 4px;
		/*  设置纵轴（y轴）轴滚动条 */
		height: 4px;
		/*  设置横轴（x轴）轴滚动条 */
	}

	/* 滚动条滑块（里面小方块） */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #409EFF;
	}

	/* 滚动条轨道 */
	::-webkit-scrollbar-track {
		border-radius: 0;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: gainsboro;
	}

	.el-radio-group {
		width: 100%;
	}

	.el-radio-group .el-radio:last-child {
		width: 100%;
		margin-bottom: 10px;
	}

	.el-checkbox.is-bordered.el-checkbox--mini {
		width: 100% !important;
		margin-bottom: 10px;
	}

	.topicConBox {
		width: 100%;
	}

	.topicWord {
		padding: 10px 20px 10px 20px;
	}

	.topicBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px gainsboro;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		overflow: hidden;
	}

	.greenBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px #67C23A;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		overflow: hidden;
	}

	.redBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px #F56C6C;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		overflow: hidden;
	}

	.scoreBox {
		margin: 0px 10px 0px 10px;
	}

	.topicTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 20px 10px 20px;
	}

	.botBox {
		width: 95%;
		margin: 20px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.titleBox {
		width: 95%;
		margin: 0 auto;
		text-align: center;

	}

	.contantBox {
		width: 100%;
		height: calc(100vh - 250px);
	}

	.el-aside {
		color: #333;
	}
</style>

<script>
	import utils from "@/utils/utils";
	export default {
		data() {
			return {
				isDrawerDialog: false,
				paperName: this.$route.query.name,
				dialogTableVisible: false,
				input: '',
				listData: [],
				chooseUser: [],
				scorePoint: 0,
				examNumber: 0,
				userAnswers: [],
				numPoint: 0,
				total: 0,
				userList: [],
				chooseID: 0,
				searchValue: '',
				radio: 3,
				title: '',
				tfOptions: [{
						id: 1,
						name: '对',
					},
					{
						id: 2,
						name: '错',
					},
				],
				options: [{
						id: 1,
						name: '单项选择题',
					},
					{
						id: 2,
						name: '多项选择题',
					},
					{
						id: 3,
						name: '判断题',
					},
					{
						id: 4,
						name: '填空题',

					},
					{
						id: 5,
						name: '简答题',
					}
				],
				questionList: [],
				scoreNum: 0,
				userAnswersList:[],
				userNum: 0,
				topicList: [],
				//分页详情
				pageInfo: {
					//当前页
					examId: this.$route.query.id,
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				//搜索
				searchForm: {
					name: "",
					type: '',
					bankId: ''
				},
				questionList: [],
				chooseId: this.$route.query.id,
				bankList: [],
				chooseTypeList: [],
				updateList: {
					examTime: '',
					handTime: '',
					id: ''
				},
				formData: {

				},
				//删除数据的id
				ids: [],
				tableData: [],
				SubjectivePoint: 0,
				ObjectivePoint: 0,
				studentId: '',
				userInfo: utils.getUserInfo(),
				chooseArr: [],
				userPaper:[],
				selectedIds: [],
				change: false,
				questionType: [
					"单项选择题",
					"多项选择题",
					"判断题",
					"填空题",
					"简答题"
				],
				selectList: [
					"A：",
					"B：",
					"C：",
					"D：",
				],
				nextLetter: 'E'.charCodeAt(0),
				defaultList: [
					"A：",
					"B：",
					"C：",
					"D：",
				],
			}
		},
		created() {
			this.getPageList()
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			getPageList() {
				this.$axios.get("/exam/getExamInfoById?id=" + this.chooseId).then(res => {
					this.userList = res.data.exam_info
					this.userNum = this.userList.length
					console.log(this.userList,999)
				})
			},
			handleEdit() {
				console.log(this.studentId)
				if(this.studentId){
					this.userPaper = this.userList.find(obj => obj.id == this.studentId)
					console.log(this.userPaper,9998776)
					this.userAnswersList = this.userPaper.userAnswers
					this.userAnswersList.forEach(item => {
						if (item.type == '多项选择题') {
							item.answer = item.answer
							item.options.forEach(j => {
								if (item.userAnswer.indexOf(j.value) != -1) {
									j.ischeck = true
								} else {
									j.ischeck = false
								}
							})
						}
					})
					this.dialogTableVisible = true
				}else{
					this.$message.error('请先选择考生!')
				}
			},
			handleInput(id, score, max) {
				this.SubjectivePoint = 0
				let realScore = parseInt(score)
				console.log(id, realScore, max)
				//判断简答题得分最大值有没有超过当前题目的分数，如果有就让分数等于最大值
				if (realScore > max) {
					realScore = max
					this.questionList.forEach(item => {
						if (item.id == id) {
							item.userScore = realScore
						}
						this.SubjectivePoint += parseInt(item.userScore)
					})
					console.log(this.SubjectivePoint, '得分')
				} else {
					this.questionList.forEach(item => {
						if (item.id == id) {
							item.userScore = realScore
						}
						this.SubjectivePoint += parseInt(item.userScore)
					})

				}
				console.log(this.SubjectivePoint, this.ObjectivePoint, '总分')
				this.numPoint = this.SubjectivePoint + this.ObjectivePoint
			},
			saveScore() {
				console.log(this.chooseUser, '评分结束')
				this.$confirm('是否保存本次评分?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.chooseUser.userAnswers = JSON.stringify(this.chooseUser.userAnswers)
					this.chooseUser.score = this.numPoint
					this.chooseUser.isScore = '已评分'
					this.$axios.put("/score/update", this.chooseUser).then(res => {
						if (res.code == 200) {
							console.log(res)
							this.$message({
								type: 'success',
								message: '保存成功!'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			scrollToElement(id) {
				this.questionList = []
				//客观体分数清空
				this.ObjectivePoint = 0
				//将简答题分数清空
				this.SubjectivePoint = 0
				//将简答题总分清0
				this.scoreNum = 0
				this.studentId = id
				let res = this.userList.find(obj => obj.id == id)
				// this.userAnswers = JSON.parse(res.userAnswers)

				this.chooseUser = res
				if (!this.isArrayCheck(this.chooseUser.userAnswers)) {
					this.chooseUser.userAnswers = JSON.parse(this.chooseUser.userAnswers)
				}
				console.log(this.chooseUser, '??')
				this.chooseUser.userAnswers.forEach(item => {
					if (item.type == '简答题') {
						this.questionList.push(item)
						this.scoreNum += item.score
						this.SubjectivePoint += item.userScore
					}
					if (item.type != '简答题') {
						this.ObjectivePoint += item.userScore
						console.log(item.userScore, 231)
					}

				})
				this.numPoint = this.ObjectivePoint + this.SubjectivePoint
				console.log(this.questionList, '选中学生简答题答案')
			},

			isArrayCheck(arr) {
				return Array.isArray(arr);
			},

			back() {
				this.$router.push({
					path: '/ScoreManage',
				})
			},
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;background-color:#5eb7e8;color:white;border: solid 1px white;"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center;font-size:13px;border:1px solid #e6ebf5;"
			},
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
			},
			//搜索
			handleSearch() {
				this.pageInfo.pageNum = 1
				this.getPageList()
			},
			//单个删除
			handleDelete(index, row) {
				this.batchDelete([row])
			},
		}
	};
</script>
